import React from 'react'
import clsx from 'clsx'
import Link from '@docusaurus/Link'
import styles from './styles.module.css'
import Translate from '@docusaurus/Translate'
import communityMainImage from '/static/img/welcome.png'
import 'animate.css/animate.min.css'
import { AnimationOnScroll } from 'react-animation-on-scroll'

interface SubtextItem {
  id: number
  text: JSX.Element
}

const subtexts: SubtextItem[] = [
  {
    id: 1,
    text: (
      <Translate
        id="component.home.HomepageCommunity.subtexts.1"
        description="The First subtext of PolyOS community">
        PolyOS is propelled by the collaborative efforts of the PolyOS
        Project community.
      </Translate>
    ),
  },
  {
    id: 2,
    text: (
      <Translate
        id="component.home.HomepageCommunity.subtexts.2"
        description="The second subtext of PolyOS community">
        We embrace a distributed collaborative model.
      </Translate>
    ),
  },
  {
    id: 3,
    text: (
      <Translate
        id="component.home.HomepageCommunity.subtexts.3"
        description="The third subtext of PolyOS community">
        We extend a warm invitation to anyone to join our endeavor.
      </Translate>
    ),
  },
]

export default function HomepageCommunity(): React.JSX.Element {
  return (
    <section className={styles.heroBanner}>
      <div className="container">
        <div className="row row--no-gutters">
          <div className={clsx('col col--6', styles.textCenter)}>
            <h1 className={clsx('hero__title', styles.title)}>
              <Translate
                id="component.home.HomepageCommunity.title"
                description="What is the PolyOS community">
                Community
              </Translate>
            </h1>
            {subtexts.map((subtext: SubtextItem) => (
              <p key={subtext.id} className={styles.subtext}>
                {subtext.text}
              </p>
            ))}
            <div className="row">
              <div className={clsx('col col--8')}>
                <AnimationOnScroll animateIn="animate__fadeInUp">
                  <Link
                    className={clsx(
                      'button button--lg button--block button--primary',
                      styles.button
                    )}
                    to="/community">
                    <Translate
                      id="component.home.HomepageCommunity.button.join.text"
                      description="The text of component.home.HomepageCommunity.button.join.text">
                      Join the community
                    </Translate>
                  </Link>
                </AnimationOnScroll>
              </div>
            </div>
          </div>

          <div className={clsx('col col--6', styles.center)}>
            <img
              src={communityMainImage}
              className={styles.screenshot}
              alt="Screenshot"
            />
          </div>
        </div>
      </div>
    </section>
  )
}
